<template>
  <div class="card-list" ref="content">
    <img src="https://ae01.alicdn.com/kf/H16373597cd9a47d8958517a0bd08c096a.png" class="img-logo"/>
    <div class="table-page-search-wrapper">
      <a-form>
        <a-form-item>
          <a-input-search placeholder="输入医院名称" @search="queryHospital" />
        </a-form-item>
      </a-form>
    </div>
    <a-spin :spinning="searchSpinning" tip="正在加载数据...">
      <a-list rowKey="id" :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}" :dataSource="allHospitalList" v-if="allHospitalList.length > 0">
        <a-list-item slot="renderItem" slot-scope="item">
          <template>
            <a-card :hoverable="true" @click="openHospitalDetailPanel(item.id)">
              <a-card-meta>
                <a slot="title">{{ item.name }}</a>
                <a-avatar class="card-avatar" slot="avatar" src="https://ae01.alicdn.com/kf/Hdc9b6aeefd43470ca1642eafd1cbe653O.png" size="large"/>
                <div class="meta-content" slot="description">{{ item.address }}</div>
              </a-card-meta>
            </a-card>
          </template>
        </a-list-item>
      </a-list>
      <a href="https://www.wenjuan.com/s/QJNnYro/" v-else>
        <a-card :hoverable="true" >
          <img
            alt="疫情当前，我们在一起！"
            src="https://ae01.alicdn.com/kf/Hf70dc7913e3248039fe18efd1482be0eJ.png"
            slot="cover"
          />
          <a-card-meta description="当前未录入所查询医院的信息，点击卡片前往提交信息！">
          </a-card-meta>
        </a-card>
      </a>
    </a-spin>
    <a-modal
      style="top: 20px;"
      :width="800"
      v-model="hospitalDetailPanelVisible"
    >
      <template slot="footer">
        <a-row>
          <a-col :span="11"><a-button type="primary" block> <a-icon type="clock-circle" />提交审核 </a-button></a-col>
          <a-col :span="2"><div></div></a-col>
          <a-col :span="11"><a-button type="danger" block> 提交作废<a-icon type="delete" /> </a-button></a-col>
        </a-row>
      </template>
      <template slot="title">
        <img src="https://ae01.alicdn.com/kf/H16373597cd9a47d8958517a0bd08c096a.png" class="img-logo"/>
      </template>
      <a-spin :spinning="hospitalDetailPanelSpinning">
        <a-card :bordered="false">
          <a-row :gutter="8">
            <a-col span="6">
              <div>医院名称:</div>
            </a-col>
            <a-col span="18">
              <div>{{ currentHospital.name }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="8">
            <a-col span="6">
              <div>医护数量:</div>
            </a-col>
            <a-col span="18">
              <div>{{ currentHospital.staffCount }}人</div>
            </a-col>
          </a-row>
          <a-row :gutter="8">
            <a-col span="6">
              <div>邮寄地址:</div>
            </a-col>
            <a-col span="18">
              <div>{{ currentHospital.address }}</div>
            </a-col>
          </a-row>
          <a-divider />
          <a-card :loading="contactLoading" title="邮寄收货人">
            <a-list itemLayout="horizontal" :dataSource="currentHospital.contacts">
              <a-list
                rowKey="id"
                :grid="{gutter: 24, lg: 1, md: 1, sm: 1, xs: 1}"
                slot="renderItem"
                slot-scope="item"
              >
                <a-list-item v-if="item.volunteerName != ' '">
                  志愿者名称：{{ item.volunteerName }}
                </a-list-item>
                <a-list-item v-if="item.hospitalContact != ' '">
                  联系人：{{ item.hospitalContact }}
                </a-list-item>
                <a-list-item v-if="item.phone != ' '">
                  联系电话：{{ item.phone }}
                </a-list-item>
                <a-list-item v-if="item.remark != ' '">
                  备注：{{ item.remark }}
                </a-list-item>
                <a-divider />
              </a-list>
              <a-button type="primary" icon="edit" @click="openUpdateContactPanel" block>修改联系人信息</a-button>
            </a-list>
          </a-card>
          <a-divider />
          <a-card :loading="demandLoading" title="物资需求明细">
            <a-list
              itemLayout="horizontal"
              :dataSource="currentHospital.materialDemands"
            >
              <a-list
                rowKey="id"
                :grid="{gutter: 24, lg: 1, md: 1, sm: 1, xs: 1}"
                slot="renderItem"
                slot-scope="item"
              >
                <a-list-item>
                  物资名称：{{ item.demandName }}
                </a-list-item>
                <a-list-item>
                  物资数量：{{ item.quantity }}{{ item.unit }}
                </a-list-item>
                <a-list-item v-if="item.remark != ' '">
                  备注：{{ item.remark }}
                </a-list-item>
                <a-divider />
              </a-list>
            </a-list>
            <a-button type="primary" icon="edit" @click="openUpdateDemandPanel" block>修改物资请求</a-button>
          </a-card>
        </a-card>
      </a-spin>
    </a-modal>
    <!-- <a-modal
      title="添加物资需求"
      style="top: 20px;"
      :width="800"
      v-model="addDemandVisible"
    >
      <template slot="footer">
        <a-button :loading="addLoading" @click="handleAddDemand" block>
          确认提交
        </a-button>
      </template>
      <a-form :form="addDemandForm">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院唯一标识码"
          :style="{ display: 'none' }"
        >
          <a-input
            v-decorator="[
              'hospitalId',{ initialValue:currentHospitalId }]"
            disabled="disabled"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资名称"
        >
          <a-input
            v-decorator="[
              'demandName',
              { rules: [{ required: true, message: '物资名称不可以为空哦！' }] },
            ]"
            placeholder="物资名称"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资数量"
        >
          <a-input
            v-decorator="[
              'quantity',
              {
                rules: [
                  {
                    type: 'number',
                    message: '不合法的数值!',
                    transform:(value)=> {return Number(value)}
                  },
                  {
                    required: true,
                    message: '数量是必填项哈!',
                  },
                ],
              },
            ]"
            placeholder="物资数量"
            allowClear>
            <a-select slot="addonAfter" style="width: 80px" v-decorator="['unit',{ initialValue:'个' }]">
              <a-select-option value="个">个</a-select-option>
              <a-select-option value="双">双</a-select-option>
              <a-select-option value="箱">箱</a-select-option>
              <a-select-option value="件">件</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </a-input>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="紧急程度"
        >
          <a-select v-decorator="['level',{ initialValue: 7 }] ">
            <a-select-option :value="7">七天内告急</a-select-option>
            <a-select-option :value="6">六天内告急</a-select-option>
            <a-select-option :value="5">五天内告急</a-select-option>
            <a-select-option :value="4">四天内告急</a-select-option>
            <a-select-option :value="3">三天内告急</a-select-option>
            <a-select-option :value="2">两天内告急</a-select-option>
            <a-select-option :value="1">一天内告急</a-select-option>
            <a-select-option :value="0">已无此类物资</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
        >
          <a-textarea :rows="2" placeholder="备注" v-decorator="['remark']"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="修改物资需求"
      style="top: 20px;"
      :width="800"
      v-model="changeDemandVisible"
    >
      <template slot="footer">
        <a-button :loading="changeDemandLoading" @click="changeDemand" block>
          确认提交修改
        </a-button>
      </template>
      <a-form :form="changeDemandForm">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院唯一标识码"
          :style="{ display: 'none' }"
        >
          <a-input
            v-decorator="[
              'hospitalId',{ initialValue:currentHospitalId }]"
            disabled="disabled"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="需求物资唯一标识码"
          :style="{ display: 'none' }"
        >
          <a-input
            v-decorator="[
              'id',{ initialValue:currentDemand.id }]"
            disabled="disabled"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资名称"
        >
          <a-input
            v-decorator="[
              'demandName',
              { rules: [{ required: true, message: '物资名称不可以为空哦！' }], initialValue:currentDemand.demandName},
            ]"
            placeholder="物资名称"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资数量"
        >
          <a-input
            v-decorator="[
              'quantity',
              {
                rules: [
                  {
                    type: 'number',
                    message: '不合法的数值!',
                    transform:(value)=> {return Number(value)}
                  },
                  {
                    required: true,
                    message: '数量是必填项哈!'
                  },
                ],
                initialValue:currentDemand.quantity
              },
            ]"
            placeholder="物资数量"
            allowClear>
            <a-select
              slot="addonAfter"
              style="width: 80px"
              v-decorator="['unit',{
                initialValue:currentDemand.unit }]">
              <a-select-option value="个">个</a-select-option>
              <a-select-option value="双">双</a-select-option>
              <a-select-option value="箱">箱</a-select-option>
              <a-select-option value="件">件</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </a-input>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="紧急程度"
        >
          <a-select v-decorator="['level',{ initialValue: currentDemand.level }] ">
            <a-select-option :value="7">七天内告急</a-select-option>
            <a-select-option :value="6">六天内告急</a-select-option>
            <a-select-option :value="5">五天内告急</a-select-option>
            <a-select-option :value="4">四天内告急</a-select-option>
            <a-select-option :value="3">三天内告急</a-select-option>
            <a-select-option :value="2">两天内告急</a-select-option>
            <a-select-option :value="1">一天内告急</a-select-option>
            <a-select-option :value="0">已无此类物资</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
        >
          <a-textarea :rows="2" placeholder="备注" v-decorator="['remark',{ initialValue: currentDemand.remark }]"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="添加联系人"
      style="top: 20px;"
      :width="800"
      v-model="addContactVisible"
    >
      <template slot="footer">
        <a-button :loading="addContactLoading" @click="handleAddContact" block>
          确认提交
        </a-button>
      </template>
      <a-form :form="addContactForm">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院唯一标识码"
          :style="{ display: 'none' }"
        >
          <a-input
            v-decorator="[
              'hospitalId',{ initialValue:currentHospitalId }]"
            disabled="disabled"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="志愿者姓名"
        >
          <a-input
            v-decorator="[
              'volunteerName',
              { rules: [{ required: true, message: '志愿者姓名不可以为空哦！' }] },
            ]"
            placeholder="志愿者姓名"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系人姓名"
        >
          <a-input
            v-decorator="[
              'hospitalContact',
              { rules: [{ required: true, message: '联系人姓名不可以为空哦！' }] },
            ]"
            placeholder="联系人姓名"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系电话"
        >
          <a-input
            v-decorator="[
              'phone',
              { rules: [{ required: true, message: '联系电话不可以为空哦！' }] },
            ]"
            placeholder="联系电话"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
        >
          <a-textarea :rows="2" placeholder="备注" v-decorator="['remark']"/>
        </a-form-item>
      </a-form>
    </a-modal> -->
  </div>
</template>

<script>
import * as hospitalAPI from '@/api/hospital'

const allHospitalList = []

export default {
  name: 'CardList',
  data () {
    return {
      currentHospitalId: '',
      currentHospital: [],
      currentDemand: [],
      currentDemandByID: {},
      currentContact: [],
      currentContactByID: {},
      hospitalDetailPanelVisible: false,
      hospitalDetailPanelSpinning: false,
      contactLoading: false,
      demandLoading: false,
      allHospitalList
    }
  },
  beforeMount () {
    this.queryHospitals()
  },
  methods: {
    queryHospitals () {
      this.searchSpinning = true
      hospitalAPI.getHospital().then(res => {
        this.allHospitalList = res.data
        this.searchSpinning = false
      })
    },
    queryHospital (value) {
      if (value === undefined) {
        this.queryHospitals()
        return
      }
      const { $data } = this
      this.searchSpinning = true
      hospitalAPI.getHospitals(value).then(res => {
        this.allHospitalList = res.data
        this.searchSpinning = false
      }).catch(err => {
        this.searchSpinning = false
        $data.error(`查询出错: ${err.response.data.errors[0].message}`)
      })
    },
    openHospitalDetailPanel (hospitalId) {
      this.hospitalDetailPanelVisible = true
      this.hospitalDetailPanelSpinning = true
      hospitalAPI.getHospitalById(hospitalId).then(res => {
        this.currentHospital = res
        this.currentDemand = res.materialDemands
        this.currentContact = res.contacts
        this.hospitalDetailPanelSpinning = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.card-list {

  /deep/ .ant-card-meta-title {
    margin-bottom: 12px;

    & > a {
      display: inline-block;
      max-width: 100%;
      color: rgba(0, 0, 0, 0.85);
    }
  }

  /deep/ .meta-content {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    height: 64px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    margin-bottom: 1em;
  }
}

.card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 48px;
}
.ant-card-actions {
  background: #f7f9fa;

  li {
    float: left;
    text-align: center;
    width: 50%;

    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }

    a {
      line-height: 22px;
      display: inline-block;
      width: 100%;
    }
  }
}
.img-logo {
  width: 100%
}
</style>
